<template>
	<div>

		<card v-if="$store.state.superAdmin == 'true'" style="margin-bottom:10px">
	      	<el-select style="width:100%" v-model="museumId" @change="change" filterable>
	        	<el-option
	              	v-for="item in museumList"
	              	:key="item.id"
	              	:label="item.name"
	              	:value="item.id">
	            </el-option>
	      	</el-select>
  		</card>

  		<Card>
  			<div class="flexCSB">
  				<div>
		      		<Button type="primary" :loading="loading1" @click="add">添加商品</Button>
		      		<Button type="warning" :loading="loading3" @click="shouhou">售后管理</Button>
		      		<Button type="info" :loading="loading5" @click="kefu">客服热线</Button>
		      	</div>
		      	<div>
			      	<Input
			          placeholder="请输入商品名称"
			          suffix="ios-search"
			          style="width:300px;margin-left:10px"
			          v-model="name"
			          @on-change="change"
			        ></Input>
			        <RadioGroup v-model="shelves" type="button" @on-change="change">
			          <Radio label="0">全部</Radio>
			          <Radio label="1">上架</Radio>
			          <Radio label="2">下架</Radio>
			        </RadioGroup>
			    </div>
		    </div>
  			<Table class="table" :loading="loading1" highlight-row :columns="columns" :data="data"></Table>
		    <Page
			show-total
		      class="page"
		      :total="total"
		      :current.sync="current"
		      show-elevator
		      @on-change="changePage"
		    />
  		</Card>

  		<Modal title="商品管理" v-model="modal1" width="70">
	     	<Form ref="form" :model="newData" :label-width="120">
	     		<Divider>必填项</Divider>
		        <FormItem label="商品名称：" prop="name">
		          	<Input maxlength="20" show-word-limit style="width:400px" v-model="newData.name"></Input>
		        </FormItem>
		        <FormItem label="商品分类：" prop="mallCategoryId">
			      	<Select style="width:400px" v-model="newData.mallCategoryId">
		          		<template v-for="item in typeList">
		          			<Option :value="item.id">{{item.name}}</Option>
		          		</template>
		          	</Select>
		          	<Button type="info" @click="addType">添加更多商品分类</Button>
		        </FormItem>
		        <FormItem label="banner展示：" prop="advertising">
		          	<Select style="width:400px" v-model="newData.advertising">
		          		<template v-for="item in advertisingList">
		          			<Option :value="item.value">{{item.name}}</Option>
		          		</template>
		          	</Select>
		        </FormItem>
		        <FormItem label="商品封面图：" prop="mainPic">
		        	<vue-uploadimg :imgUrl="imgurl2" :clear="clear2" style="width:400px" @uploadImg="uploadImg2"></vue-uploadimg>
		        </FormItem>
		        <FormItem label="商品轮播图：" prop="pics">
		          	<vue-uploadimgmore :imgUrl="imgurl" :clear="clear" @uploadImg="uploadImg"></vue-uploadimgmore>
		        </FormItem>
		        <Divider>非必填项</Divider>
		        <FormItem label="商品库存：" prop="stock">
		        	<InputNumber :min="0" v-model="newData.stock" style="width:400px"></InputNumber> 件
		        </FormItem>
		        <FormItem label="商品基础销量：" prop="basisSales">
		          	<InputNumber :min="0" v-model="newData.basisSales" style="width:400px"></InputNumber> 件
		        </FormItem>
		        <FormItem label="商品原价：" prop="originalPrice">
		          	<InputNumber precision="2" :min="1" v-model="newData.originalPrice" style="width:400px"></InputNumber> 元
		        </FormItem>
		        <FormItem label="商品现价：" prop="price">
		          	<InputNumber :min="1" precision="2" v-model="newData.price" style="width:400px"></InputNumber> 元
		        </FormItem>
		        <FormItem label="商品标签：" prop="labels">
		        	<Select multiple style="width:100%" v-model="newData.labels">
		          		<template v-for="item in labelsList">
		          			<Option :value="item.name">{{item.name}}</Option>
		          		</template>
		          	</Select>
		        </FormItem>
		        <FormItem label="商品简介：" prop="summary">
		          	<Input maxlength="200" show-word-limit type="textarea" :autosize="{minRows: 4,maxRows: 10}" v-model="newData.summary" clearable></Input>
		        </FormItem>
		        <FormItem label="商品详情：" prop="detail">
		          	<vue-tinymce v-if="museumId" :value="newData.detail" @catchData="catchData"></vue-tinymce>
		        </FormItem>
		    </Form>
	      	<div slot="footer">
	        	<Button type="primary" style="width:200px" @click="submit" :loading="loading2">提交商品</Button>
	      	</div>
    	</Modal>

    	<Modal title="售后管理" v-model="modal2" width="70">
    		<Button type="primary" @click="addLoc">添加地址</Button>
    		<Table class="table" highlight-row :columns="columns2" :data="data2"></Table>
    		<div slot="footer"></div>
    	</Modal>

    	<Modal title="售后管理" v-model="modal3" width="50">
    		<Form ref="form" :model="newData2" :label-width="120">
		        <FormItem label="地址：" prop="address">
		          	<Input style="width:100%" v-model="newData2.address"></Input>
		        </FormItem>
		        <FormItem label="收件人名称：" prop="receiverName">
		          	<Input style="width:100%" v-model="newData2.receiverName"></Input>
		        </FormItem>
		        <FormItem label="收件人手机号：" prop="receiverPhone">
		          	<Input style="width:100%" v-model="newData2.receiverPhone"></Input>
		        </FormItem>
		    </Form>
    		<div slot="footer">
	        	<Button type="primary" style="width:200px" @click="submit2" :loading="loading4">提交</Button>
	      	</div>
    	</Modal>

    	<Modal title="客服热线" v-model="modal4" width="50">
    		<Input placeholder="请输入客服热线" style="width:100%" v-model="newData3.phone"></Input>
    		<div slot="footer">
	        	<Button type="primary" style="width:200px" @click="submit3" :loading="loading5">提交</Button>
	      	</div>
    	</Modal>

	</div>
</template>

<script>
  	export default {
    	data() {
      		return {
      			museumId: '',
      			total: 0,
      			current: 1,
      			name: '',
      			imgurl2: '',
      			id: '',
      			shelves: '0',

      			museumList: [],
      			typeList: [],
      			imgurl: [],
      			data: [],
      			data2: [],
      			newData3: {
      				id: '',
      				phone: '',
      			},
      			newData2: {
      				address: '',
      				receiverName: '',
      				receiverPhone: '',
      			},
      			newData: {
					basisSales: 0,
					detail: "",
					pic: "",
					mallCategoryId: "",
					name: "",
					originalPrice: 0,
					price: 0,
					stock: 0,
					summary: "",
					advertising: '不展示',
					labels: []
      			},
      			
      			clear: true,
      			clear2: true,
      			modal1: false,
      			modal2: false,
      			modal3: false,
      			modal4: false,
      			loading1: false,
      			loading2: false,
      			loading3: false,
      			loading4: false,
      			loading5: false,

      			advertisingList:[
      				{
      					name: '展示',
      					value: '展示',
      				},
      				{
      					name: '不展示',
      					value: '不展示',
      				}
      			],
      			labelsList: [
      				{
      					name: '正品保障',
      				},
      				{
						name: '品牌授权',
      				},
      				{
						name: '七日退换',
      				},
      				{
						name: '商品包邮',
      				},
      			],
      			columns2: [
      				{ title: "地址", key: "address", width: 400 },
      				{ title: "收件人名称", key: "receiverName", width: 200 },
      				{ title: "收件人手机号", key: "receiverPhone", },
      			],
      			columns: [
      				{ title: "商品名称", key: "name" },
      				{
			          title: "banner展示",
			          key: "advertising2",
			          render: (h, params) => {
			            const color = params.row.advertising2 == "展示" ? "primary" : "error";
			            return h(
			              "Tag",
			              {
			                props: { type: "dot", color: color }
			              },
			              params.row.advertising2
			            );
			          }
			        },
			        {
			          title: "是否上架",
			          key: "shelves2",
			          render: (h, params) => {
			            const color = params.row.shelves2 == "上架" ? "primary" : "error";
			            return h(
			              "Tag",
			              {
			                props: { type: "dot", color: color }
			              },
			              params.row.shelves2
			            );
			          }
			        },
      				{
			          title: "操作",
			          render: (h, params) => {
			            return h("div",[
			            	h(
			                "p",
			                {
			                  style: {
			                  	visibility: 'hidden',
			                  	lineHeight: '100%'
			                  },
			                },
			                "审核中。。。"
			              ),
			            	h(
			                "Button",
			                {
			                  style: {
			                  	marginRight: '10px',
			                  	marginBottom: '10px',
			                  	display: !params.row.shelves ? 'inline-block' : 'none',
			                  	// visibility: 'hidden'
			                  },
			                  props: {
			                    type: "success",
			                    // disabled: params.row.states != 1 ? true : false
			                  },
			                  on: {
			                    click: () => {
			                      this.shelvesGoodsOrNot(params);
			                    }
			                  }
			                },
			                "上架"
			              ),
			            	h(
			                "Button",
			                {
			                  style: {
			                  	marginRight: '10px',
			                  	marginBottom: '10px',
			                  	display: params.row.shelves ? 'inline-block' : 'none',
			                  	// visibility: 'hidden'
			                  },
			                  props: {
			                    type: "primary",
			                    // disabled: params.row.states != 1 ? true : false
			                  },
			                  on: {
			                    click: () => {
			                      this.shelvesGoodsOrNot(params);
			                    }
			                  }
			                },
			                "下架"
			              ),
			              h(
			                "Button",
			                {
			                  style: {
			                  	marginRight: '10px',
			                  	marginBottom: '10px',
			                  	// visibility: 'hidden'
			                  },
			                  props: {
			                    type: "warning",
			                    // disabled: params.row.states != 1 ? true : false
			                  },
			                  on: {
			                    click: () => {
			                      this.update(params);
			                    }
			                  }
			                },
			                "修改"
			              ),
			              h(
			                "Button",
			                {
			                	style:{
			                		// visibility: 'hidden'
			                		marginBottom: '10px',
			                	},
			                  props: {
			                    type: "error",
			                  },
			                  on: {
			                    click: () => {
			                      this.del(params);
			                    }
			                  }
			                },
			                "删除"
			              ),
			            ]);
			          }
			        }
      			],
      			
      			
      			





      		}
      	},
      	created() {
    		if (this.$store.state.superAdmin == "true") {
      			this.getMuseumList();
    		} else {
      			this.museumId = this.$store.state.museumId;
      			this.getMallGoods()
      			this.getMallCategory()
			}
  		},
      	methods:{
      		// 获取博物馆列表
		    getMuseumList() {
		      this.loading1 = true;
		      this.$http("/stage/museum/getAppMuseumDropDown", {}, "post", res => {
		        if (res.data.code == 200) {
		          	this.museumList = res.data.data;
		          	for (let i = 0; i < this.museumList.length; i++) {
		            	if (this.museumList[i].name.length > 20) {
		              		this.museumList[i].name =
		                	this.museumList[i].name.slice(0, 20) + "...";
		            	}
		          	}
		          	// this.museumId = '5188'
		          	this.museumId = this.museumList[0].id;
		          	this.getMallGoods()
		          	this.getMallCategory()
		        } else {
		          this.$Message.error(res.data.msg);
		        }
		      });
		    },
		    getMallCategory(){
		    	this.$http("/stage/category/getMallCategory", {
		    		museumId: this.museumId
		    	}, "get", res => {
			        if (res.data.code == 200) {
			          	this.typeList = res.data.data
			        } else {
			          	this.$Message.error(res.data.msg);
			        }
			    });
		    },
		    change(){
		    	this.current = 1
		    	this.getMallGoods();
		    	this.getMallCategory()
		    },
		    update(data){
		    	if(data.row.shelves){
		    		this.$Message.error('请先下架该商品');
		    		return false
		    	}
		    	this.modal1 = true
		    	this.newData = {
					basisSales: data.row.basisSales,
					detail: data.row.detail,
					pics: data.row.pics,
					mainPic: data.row.mainPic,
					mallCategoryId: data.row.mallCategoryId,
					name: data.row.name,
					originalPrice: data.row.originalPrice/100,
					price: data.row.price/100,
					stock: data.row.stock,
					summary: data.row.summary,
					advertising: data.row.advertising ? '展示' : '不展示',
					labels: []
		    	}
		    	this.imgurl = []
		    	this.imgurl2 = ''
		    	for (let i = 0; i < this.newData.pics.length; i++) {
			        this.imgurl.push({
			          	name: this.newData.pics[i],
			          	url: this.newData.pics[i]
			        });
		      	}
		      	this.imgurl2 = data.row.mainPic
		      	this.clear = !this.clear;
		      	this.clear2 = !this.clear2;
		    	this.id = data.row.id
		    },
		    add(){
		    	this.modal1 = true
		    	this.newData = {
					basisSales: 0,
					detail: "",
					pics: "",
					mainPic: '',
					mallCategoryId: "",
					name: "",
					originalPrice: 0,
					price: 0,
					stock: 0,
					summary: "",
					advertising: '不展示',
					labels: [
						'品牌授权',
						'正品保障'
					]
		    	}
		    	this.imgurl2 = ''
		    	this.imgurl = []
      			this.clear = !this.clear
      			this.clear2 = !this.clear2
		    },
		    changePage(data){
		    	this.current = data
      			this.getMallGoods()
		    },
		    getMallGoods(){
		    	let shelves = ''
		    	if(this.shelves == '1'){
		    		shelves = true
		    	}
		    	if(this.shelves == '2'){
		    		shelves = false
		    	}
		    	this.loading1 = true
		    	this.$http(
		        "/stage/goods/getMallGoods",
		        {
		          	current: this.current,
		          	size: this.size,
		          	appMuseumId: this.museumId,
		          	name: this.name,
		          	shelves: shelves
		        },
		        "post",
		        res => {
		          	if (res.data.code == 200) {
		            	this.data = res.data.data.records;
		            	this.total = res.data.data.total;
		            	for(let i=0;i<this.data.length;i++){
		            		for(let j=0;j<this.typeList.length;j++){
		            			if(this.data[i].mallCategoryId == this.typeList[j].id){
		            				this.data[i].mallCategoryId2 = this.typeList[j].name
		            			}
		            		}
		            		if(this.data[i].shelves){
		            			this.data[i].shelves2 = '上架'
		            		}else{
		            			this.data[i].shelves2 = '下架'
		            		}
		            		if(this.data[i].advertising){
		            			this.data[i].advertising2 = '展示'
		            		}else{
		            			this.data[i].advertising2 = '不展示'
		            		}
		            		this.data[i].pics = this.data[i].pics.split(',')
		            		this.data[i].price = parseInt(this.data[i].price)
		            		this.data[i].originalPrice = parseInt(this.data[i].originalPrice)
		            	}
		          	} else {
		            	this.$Message.error(res.data.msg);
		          	}
		          	this.loading1 = false;
		        });
		    },
		    del(params){
		    	if(params.row.shelves){
		    		this.$Message.error('请先下架该商品');
		    		return false
		    	}
		    	this.$Modal.confirm({
			        title: "提示",
			        content:
			          	"<p>确定要删除商品<strong> " +
			          	params.row.name +
			          	" </strong>吗？</p>",
			        onOk: () => {
			          	this.loading1 = true;
			          	this.$http(
			            "/stage/goods/deleteMallGoods",
			            {
			              id: params.row.id
			            },
			            "get",
			            res => {
			              if (res.data.code == 200) {
			                this.$Message.success("删除商品成功");
			                this.getMallGoods();
			              } else {
			                this.$Message.error(res.data.msg);
			              }
			            }
			          );
			        },
			        onCancel: () => {}
			    });
		    },
		    submit(){
		    	if(this.newData.mallCategoryId == ''){
		    		this.$Message.error('商品分类请选择');
		    		return false
		    	}
		    	if(this.newData.name == ''){
		    		this.$Message.error('商品名称请输入');
		    		return false
		    	}
		    	if(this.newData.mainPic == ''){
		    		this.$Message.error('商品封面图请上传');
		    		return false
		    	}
		    	if(this.newData.pics == ''){
		    		this.$Message.error('商品主图请上传');
		    		return false
		    	}
		    	let data = {
					basisSales: this.newData.basisSales,
					detail: this.newData.detail,
					pics: this.newData.pics.join(','),
					mallCategoryId: this.newData.mallCategoryId,
					name: this.newData.name,
					originalPrice: this.newData.originalPrice*100,
					price: this.newData.price*100,
					stock: this.newData.stock,
					summary: this.newData.summary,
					mainPic: this.newData.mainPic,
					appMuseumId: this.museumId,
					advertising: this.newData.advertising == '展示' ? true : false
		    	}
		    	this.loading2 = true
		    	if(this.id == ''){
		    		this.$http(
			        "/stage/goods/saveMallGoods",
			        data,
			        "post",
			        res => {
			          	if (res.data.code == 200) {
			            	this.$Message.success('新增商品成功');
			            	this.modal1 = false
			            	this.getMallGoods()
			          	} else {
			            	this.$Message.error(res.data.msg);
			          	}
			          	this.loading2 = false;
			        });
		    	}else{
		    		data.id = this.id
		    		this.$http(
			        "/stage/goods/updateMallGoods",
			        data,
			        "post",
			        res => {
			          	if (res.data.code == 200) {
			            	this.$Message.success('新增商品成功');
			            	this.modal1 = false
			            	this.getMallGoods()
			          	} else {
			            	this.$Message.error(res.data.msg);
			          	}
			          	this.loading2 = false;
			        });
		    	}
		    },
		    uploadImg(data) {
		      	this.newData.pics = [];
		      	for (let i = 0; i < data.length; i++) {
		        	this.newData.pics.push(data[i].url);
		      	}
		    },
		    catchData(data) {
      			this.newData.detail = data;
    		},
    		shelvesGoodsOrNot(params){
    			this.$http(
			        "/stage/goods/shelvesGoodsOrNot",
			        {
			        	id: params.row.id
			        },
			        "post",
			        res => {
			          	if (res.data.code == 200) {
			            	this.getMallGoods()
			          	} else {
			            	this.$Message.error(res.data.msg);
			          	}
			        }
			    );
    		},
    		uploadImg2(data) {
      			this.newData.mainPic = data
    		},
    		shouhou(){
    			this.loading3 = true
    			this.$http(
			        "/stage/order/getMallAfterSaleAddress",
			        {
			        	appMuseumId: this.museumId
			        },
			        "get",
			        res => {
			        	this.loading3 = false
			          	if (res.data.code == 200) {
			            	this.data2 = res.data.data
			            	this.modal2 = true
			          	} else {
			            	this.$Message.error(res.data.msg);
			          	}
			        }
			    );
    		},
    		submit2(){
    			if(this.newData2.address == ''){
    				this.$Message.error('收货地址不能为空')
    				return false
    			}
    			if(this.newData2.receiverName == ''){
    				this.$Message.error('收货人姓名不能为空')
    				return false
    			}
    			if(this.newData2.receiverPhone == ''){
    				this.$Message.error('收货人手机号不能为空')
    				return false
    			}
    			this.loading4 = true
    			this.$http(
			        "/stage/order/saveOrUpdateMallAfterSaleAddress",
			        {
			        	address: this.newData2.address,
						appMuseumId: this.museumId,
						id: this.newData2.id,
						receiverName: this.newData2.receiverName,
						receiverPhone: this.newData2.receiverPhone,
			        },
			        "post",
			        res => {
			        	this.loading4 = false
			          	if (res.data.code == 200) {
			            	this.$Message.success('提交成功');
			            	this.modal2 = false
			            	this.modal3 = false
			          	} else {
			            	this.$Message.error(res.data.msg);
			          	}
			        }
			    );
    		},
    		addLoc(){
    			this.modal3 = true
    		},
    		kefu(){
    			this.loading5 = true
    			this.$http(
			        "/stage/goods/getMallHotLineForBack",
			        {
						appMuseumId: this.museumId,
			        },
			        "get",
			        res => {
			        	this.loading5 = false
			          	if (res.data.code == 200) {
			            	this.modal4 = true
			            	if(res.data.data){
			            		this.newData3 = {
				            		id: res.data.data.id,
				            		phone: res.data.data.phone,
				            	} 
			            	}else{
			            		this.newData3 = {
				            		id: '',
				            		phone: ''
				            	} 
			            	}
			          	} else {
			            	this.$Message.error(res.data.msg);
			          	}
			        }
			    );
    		},	
    		submit3(){
    			if(this.newData3.phone == ''){
    				this.$Message.error('请输入客服热线');
    				return false
    			}
    			let data = {
    				phone: this.newData3.phone,
    				appMuseumId: this.museumId,
    			}
    			if(this.newData3.id == ''){

    			}else{
    				data.id = this.newData3.id
    			}
    			this.loading5 = true
    			this.$http(
			        "/stage/goods/saveOrUpdateMallHotLine",
			        data,
			        "post",
			        res => {
			        	this.loading5 = false
			          	if (res.data.code == 200) {
			            	this.modal4 = false
			            	this.$Message.success('提交成功');
			          	} else {
			            	this.$Message.error(res.data.msg);
			          	}
			        }
			    );
    		},
    		addType(){
    			this.$router.push({
    				name: '分类管理'
    			})
    		},







      	}
    }
</script>

<style scoped></style>